<template>
	<view class="orderDetails u-skeleton">
		<u-skeleton 
			:loading="loading" 
			:animation="true" 
			bgColor="#FFF"
		></u-skeleton>

		<div class="header">
			<div class="u-skeleton-fillet">
				{{oderInfo.toggleInfo.orderTitle}}
			</div>
			<!-- 未支付 需要显示支付倒计时 -->
			<div class="flex flexAlignItems" v-if="oderInfo.rider_order_status==8">
				，剩余
				<u-count-down 
					ref="uCountDown" 
					:timestamp="oderInfo.diff_count_down" 
					format="mm:ss"
					@end="countDownEnd"
					style="margin-left:10rpx;color: #f37000;"
				></u-count-down>
			</div>
			<!-- <uni-icons type="right" size="18"></uni-icons> -->
		</div>
		<div class="content">
			<!-- 未支付 需要显示支付倒计时 和提示信息 -->
			<div 
				v-if="oderInfo.rider_order_status==8"
				class="timeOutTipsBox flex flexAlignItems u-skeleton-fillet"
			>
				<uni-icons type="sound" size="20"></uni-icons>
				<div class="timeOuTips">
					支付后预计送达时间将更新，早支付早送达，<span class="themeFont">超过{{oderInfo.show_show_time_out_m}}分钟未支付</span>，订单将被自动取消，快去支付吧。
				</div>
			</div>
			<div class="boxInfo boxStyle">
				<!-- 订单已经完成 -->
				<div class="titile success" v-if="oderInfo.rider_order_status==4">
					<div class="t u-skeleton-fillet">
						感谢您对一统云校的信任，期待再次光临。
					</div>
					<div class="c u-skeleton-fillet">
						温馨提示：如有任何问题，请与客服联系。
					</div>
				</div>
				<!-- 订单为其他状态 显示其他的提示信息 该状态由前端转换显示 -->
				<div class="titile success" v-else>
					<div class="c u-skeleton-fillet">
						{{oderInfo.toggleInfo.orderTips}}
					</div>
				</div>


				<div class="fastBox flexStyle justifySpaceAround">

					<!-- 订单已经完成  显示 打赏骑手 按钮-->
					<div 
						class="fl flexStyleColumn u-skeleton-fillet" 
						v-if="oderInfo.rider_order_status===4"
					>
						<div class="iconBox">
							<uni-icons type="gift" size="30"></uni-icons>
						</div>
						<div class="name">
							打赏骑手
						</div>
					</div>


					<!-- 订单未支付 显示 取消订单 按钮-->
					<div 
						class="fl flexStyleColumn u-skeleton-fillet" 
						v-if="oderInfo.rider_order_status===8"
						@click="cancelOrder"
					>
						<div class="iconBox">
							<uni-icons type="closeempty" size="30"></uni-icons>
						</div>
						<div class="name">
							取消订单
						</div>
					</div>

					<!-- 除去状态为 支付的其他订单状态 显示 再来一单 按钮-->
					<div 
						class="fl flexStyleColumn u-skeleton-fillet" 
						@click="goToOtherPage(oderInfo)"
						v-if="oderInfo.rider_order_status!==8"
					>
						<div class="iconBox">
							<uni-icons type="plus"
								:color="`${oderInfo.rider_order_status==4?'#f37000':''}`" 
								size="30"
							></uni-icons>
						</div>
						<div class="name" :class="{themeFont:oderInfo.rider_order_status==4}">
							再来一单
						</div>
					</div>

					<!-- 订单未支付 显示 立即支付 按钮 -->
					<div 
						class="fl flexStyleColumn u-skeleton-fillet" 
						v-if="oderInfo.rider_order_status===8"
						@click="goToPage({
							path:`/common/orderCounter/orderCounter`,
							navType:`push`,
							params:{
								order_id:oderInfo.order_id,
								module
							}
						})"
					>
						<div class="iconBox">
							<uni-icons 
								type="paperplane"
								color="#f37000"
								size="30"
							></uni-icons>
						</div>
						<div class="name themeFont">
							立即支付
						</div>
					</div>

					<!-- 不管什么状态 都显示 联系客服 按钮 -->
					<div 
						class="fl flexStyleColumn u-skeleton-fillet"
					>
						<button open-type="contact" class="contactBtnStyle">

						<div class="iconBox">
							<uni-icons type="chatboxes" color="#f37000" size="30"></uni-icons>
						</div>
						<div class="name themeFont">
							联系客服
						</div>
					</button>
					</div>

				</div>
			</div>

			<!-- 跑腿模块开始 -->
			<div class="boxInfo boxStyle noPaddingTop" v-if="oderInfo.moduleName==='runErrand'">
				<!-- 显示标题名称 -->
				<div 
					class="shopName flex flexAlignItems u-skeleton-fillet" 
					@click="goToOtherPage(oderInfo)"
				>
					{{oderInfo.menu_id[0].menu_name}} 
					<uni-icons type="right" size="14" style="margin-left: 8rpx;"></uni-icons>
				</div>

				<div class="cont">
					<div class="list">
						<div class="item flexStyle" v-for="(it,i) in oderInfo.menu_id" :key="i">
							<div class="iconBox u-skeleton-fillet">
								<image src="~@/static/images/example2.png" class="commodityPic" />
							</div>
							<div class="infBox flex flexColumn justifySpaceBetween">
								<div class="top flex justifySpaceBetween">
									<div class="info flex u-skeleton-fillet">
										<div class="code">
											{{it.verify_code}}
										</div>
										<div class="poayBtn noBorder" @click="baseCopy(it.verify_code)">复制</div>
									</div>
									<div class="money u-skeleton-fillet">
										<span class="m-moneyIcon">¥</span>{{it.currentPackMoney}}
									</div>
								</div>

								<div class="statusBox flex">
									<div 
										v-for="(status,index) in it.packInfoList"
										:key="index"
										class="status u-skeleton-fillet" 
										:style="`color:${status.color};border-color:${status.borderColor}`">
										{{status.text}}
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="liner"></div>
					<div class="otherMoneyBox u-skeleton-fillet">
						<div class="it flexStyleBetween" >
							<div class="t_name">
								骑手打赏
							</div>
							<div class="value flex themeFont flexAlignItems">
								<span class="m-moneyIcon">¥</span>{{oderInfo.order_tips_money}}
							</div>
						</div>
					</div>

					<div class="totalBox u-skeleton-fillet">
						合计 <span class="totalMoney"><span class="m-moneyIcon">¥</span>{{oderInfo.order_all_money}}</span>
					</div>

				</div>
			</div>
			<!-- 跑腿模块结束 -->

			<!-- 外卖模块开始 -->
			<div class="boxInfo boxStyle noPaddingTop foodTakeout" v-else-if="oderInfo.moduleName==='foodTakeout'">
				<!-- 显示标题名称 -->
				<div 
					class="shopName flex flexAlignItems u-skeleton-fillet" 
					@click="goToOtherPage(oderInfo)"
				>
					{{ oderInfo.product_list[0].store_name }} 
					<uni-icons type="right" size="14" style="margin-left: 8rpx;"></uni-icons>
				</div>

				<div class="cont">
					<div class="list">
						<div class="item flexStyle" v-for="(it,i) in oderInfo.product_list[0].check_result" :key="i">
							<div class="iconBox u-skeleton-fillet">
								<image :src="it.product.product_icon[0].url" class="commodityPic" mode="aspectFit"/>
							</div>
							<div class="infBox flex flexColumn justifySpaceBetween">
								<div class="top flex justifySpaceBetween">
									<div class="info flex u-skeleton-fillet">
										<div class="code">
											{{it.product.product_name}}
										</div>
										<!-- <div class="poayBtn noBorder" @click="baseCopy(it.verify_code)">复制</div> -->
									</div>
									<div class="money u-skeleton-fillet">
										<span class="m-moneyIcon">¥</span>{{it.total_real_price}}
									</div>
								</div>

								<div class="statusBox flex" style="margin:3px 0">
									<div class="u-skeleton-fillet m-descripe">
										{{ it.inventoryShowName.join('、') }}
									</div>
								</div>

								<div class="statusBox flex">
									<div class="u-skeleton-fillet m-descripe">
										x{{ it.count }}
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="liner"></div>
					<div class="otherMoneyBox u-skeleton-fillet">
						<div class="it flexStyleBetween" >
							<div class="t_name">
								骑手打赏
							</div>
							<div class="value flex themeFont flexAlignItems">
								<span class="m-moneyIcon">¥</span>{{oderInfo.order_tips_money}}
							</div>
						</div>
					</div>

					<div class="otherMoneyBox u-skeleton-fillet">
						<div class="it flexStyleBetween" >
							<div class="t_name">
								打包费
							</div>
							<div class="value flex themeFont flexAlignItems">
								<span class="m-moneyIcon">¥</span>{{oderInfo.product_list[0].store_food_pack_fee_format}}
							</div>
						</div>
					</div>

					<div class="otherMoneyBox u-skeleton-fillet">
						<div class="it flexStyleBetween" >
							<div class="t_name">
								配送费
							</div>
							<div class="value flex themeFont flexAlignItems">
								<span class="m-moneyIcon">¥</span>{{oderInfo.product_list[0].store_food_delivery_fee_format}}
							</div>
						</div>
					</div>

					<div class="totalBox u-skeleton-fillet">
						合计 <span class="totalMoney"><span class="m-moneyIcon">¥</span>{{oderInfo.order_real_all_money}}</span>
					</div>

				</div>
			</div>
			<!-- 外卖模块结束 -->

			<!-- 起送送达回执开始 -->
			<div 
				class="boxInfo boxStyle noPaddingTop" 
				v-if="oderInfo.rider_order_receipt.length>0"
			>
				<div class="shopName">
					送达回执
				</div>
				<div class="receiptBox cont flexStyle justifySpaceBetween" style="padding-top:20rpx">
					<div 
						class="receiptImg flexStyle" 
						v-for="(it) in oderInfo.rider_order_receipt" :key="it"
						@click="previewImage({
							current:0,
							urls:[`https://vkceyugu.cdn.bspapp.com/VKCEYUGU-64e290cc-13c1-47d1-8aaa-038963449b81/026e6bbd-86d8-4586-8acd-d3c9895e5bc3.png`]
						})"
						>
						<image src="~@/static/images/example2.png" class="receiptPic" />
					</div>
				</div>
			</div>

			<div class="orderInfo boxStyle">
				<div class="it flexStyleBetween u-skeleton-fillet">
					<div class="t_name">
						期望时间
					</div>
					<div class="value">
						{{oderInfo.expect_time_text}}
					</div>
				</div>

				<!-- 跑腿模块下显示的取件地址 -->
				<div 
					class="it flexStyleBetween u-skeleton-fillet" 
					v-if="oderInfo.moduleName==='runErrand'"
				>
					<div class="t_name">
						取件地址
					</div>
					<div class="value flex flexColumn">
						<div class="address1 address">
							{{  oderInfo.run_errand_send_address }}
						</div>
					</div>
				</div>

				<div class="it flexStyleBetween u-skeleton-fillet" >
					<div class="t_name">
						配送地址
					</div>
					<div class="value flex flexColumn">
						<div class="address1 address">
							{{ oderInfo.user_get_pack_address_1 }}
						</div>
						<div class="address2 address">
							{{ oderInfo.user_get_pack_address_2 }}
						</div>
					</div>
				</div>

				<div 
					class="it flexStyleBetween u-skeleton-fillet" 
					v-if="oderInfo.rider_order_get_status"
				>
					<div class="t_name">
						配送骑手
					</div>
					<div class="value flex flexAlignItems">
						<div>
							未设置
						</div>
						<uni-icons type="right" size="10"></uni-icons>
					</div>
				</div>


				<div class="it flexStyleBetween u-skeleton-fillet">
					<div class="t_name">
						订单号码
					</div>
					<div class="value flexStyle">
						{{oderInfo.order_id}} <div class="poayBtn" @click="baseCopy(oderInfo.order_id)">复制</div>
					</div>
				</div>

				<div class="it flexStyleBetween u-skeleton-fillet">
					<div class="t_name">
						下单时间
					</div>
					<div class="value">
						{{oderInfo.create_date_text}}
					</div>
				</div>


				<div class="it flexStyleBetween u-skeleton-fillet">
					<div class="t_name">
						支付方式
					</div>
					<div class="value">
						微信支付
					</div>
				</div>


			</div>


			<div class="noMoreBox">
				-------- <span class="text">我是底线了</span> --------
			</div>



		</div>

	</view>
</template>

<script lang="ts" src="./orderDetails.ts"></script>

<style lang="stylus" scoped>
@import './orderDetails.styl';
</style>

